import { ReactElement, SetStateAction, useEffect, useRef, useState } from "react";
import lessModule from "./index.module.less"
import { Button, Modal } from "antd";
import { ButtonType } from "antd/es/button";

// 主页-弹窗组件-取消和确定底部组件
interface componentInterface {
    flexGap: number
    fontSize: number
    isDanger?: boolean
    dangerBgc?: string
    cancelNotIsGhost?: boolean
    dangerName?: string
    submitName?: string
    change_danger?: Function
    change_cancel: Function
    change_submit?: Function
}
const HomePage_ModalComponent_CancelAndSubmitFooterComponent: React.FC<componentInterface> = (props) => {

    return (
        <div className={lessModule["homePageModalComponentCancelAndSubmitFooterComponent"]}>
            {
                props.isDanger && <Button className={lessModule["homePageModalComponentCancelAndSubmitFooterComponent-btn"]} style={{ width: `calc((100% - ${props.flexGap}px) / 2)`, fontSize: props.fontSize ,background:props.dangerBgc}} type="primary" danger onClick={() => props.change_danger?.()}>{props.dangerName}</Button>
            }
            <Button className={lessModule["homePageModalComponentCancelAndSubmitFooterComponent-btn"]} style={{ width: `calc((100% - ${props.flexGap}px) / 2)`, fontSize: props.fontSize }} type="primary" ghost={!props.cancelNotIsGhost} onClick={() => props.change_cancel()}>取消</Button>
            {
               !props.isDanger && <Button className={lessModule["homePageModalComponentCancelAndSubmitFooterComponent-btn"]} style={{ width: `calc((100% - ${props.flexGap}px) / 2)`, fontSize: props.fontSize }} type="primary" onClick={() => props.change_submit?.()}>{props.submitName}</Button>
            }
        </div>
    )
}


export default HomePage_ModalComponent_CancelAndSubmitFooterComponent